<link rel="stylesheet" href="/assets/home/css/search.css">
<!-- 引入mescroll -->
<link rel="stylesheet" href="/assets/home/mescroll/mescroll.min.css">
<script src="/assets/home/mescroll/mescroll.min.js"></script>

<!-- 搜索框 -->
<div class="mui-input-row mui-search">
    <input type="search" class="mui-input-clear" placeholder="" name="keywords" id="keywords">
</div>

<!-- 课程列表 -->
<div class="mescroll" id="searchlist">
    <ul class="mui-table-view">
    </ul>
</div>



<div class="more">没有更多了..</div>

<!-- 引入底部 -->
{include file='common/footer' /}

<script>
    // 定义页码
    let page = 1;
    let limit = 2;

    var mescroll = new MeScroll("searchlist", {
        down: {
            callback: downCallback, //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
            auto: false
        },
        up: {
            callback: upCallback, //上拉加载的回调
            auto: true,
            page: {
                size: limit //每页数据条数,默认10
            },
            toTop: {
                //回到顶部按钮
                src: "/assets/img/mescroll-totop.png", //图片路径,默认null,支持网络图
                offset: 100 //列表滚动1000px才显示回到顶部按钮	
            },
            empty: {
                //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                warpId: "typelist", //父布局的id (1.3.5版本支持传入dom元素)
                tip: "暂无相关数据~" //提示
            },
        }
    });

    // 下拉刷新的回调
    function downCallback() {
        // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback
        mescroll.resetUpScroll()
        $("#searchlist ul").html('')
    }

    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    async function upCallback(curent) {
        page = curent.num,
            limit = curent.size

        let data = {
            page: page,
            limit: limit,
            keywords: $("#keywords").val()
        }

        $.ajax({
            type: "POST",
            url: `{:url('home/subject/search')}`,
            data: data,
            dataType: "json",
            success: function (result) {
                console.log(result)
                if (result.code == 1) {
                    let list = result.data.list
                    let count = result.data.count
                    //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                    //必传参数(当前页的数据个数, 总数据量)
                    mescroll.endBySize(list.length, count);
                    getListData(list)
                } else {
                    mescroll.endBySize(0, 0);
                }
            }
        })
    }

    // 回车事件
    $("#keywords").keydown(function (event) {
        if (event.keyCode == 13) {
            downCallback()
        }
    })

    // 渲染列表
    function getListData(data) {
        data.forEach((item) => {
            let str = `
                <li class="mui-table-view-cell mui-media">
                    <a href="{:url('home/subject/info')}?subid=${item.id}">
                        <div class="thumb">
                            <img class="img" src="${item.thumbs}">
                        </div>
                        <div class="mui-media-body">
                            <h5 class="title">${item.title}</h5>
                            <p class="content mui-ellipsis">${item.content_text}</p>
                            <p class="footer">
                                <span class="like mui-icon mui-icon-starhalf">
                                    <span>点赞： ${item.likes_text}</span>
                                </span>
                                <span class="price">￥${item.price}</span>
                            </p>
                        </div>
                    </a>
                </li>
            `
            $("#searchlist ul").append(str)
        })
    }
</script>